<template>
  <view class="container">
    <view class="user-box">
      <view class="user-img" @click="updateUserInfo">
        <img :src="userInfo.avatarUrl || '/static/image/avatar.png'" alt="" />
      </view>
      <view>
        <view>{{ userInfo.nickName }}</view>
        <view>{{ RegistrationTime }}</view>
      </view>
    </view>
    <u-cell-group>
      <u-cell
        icon="share"
        title="地址管理"
        :isLink="true"
        @click="navToAddress"
      ></u-cell>
    </u-cell-group>
    <button
      type="default"
      open-type="getPhoneNumber"
      @getphonenumber="decryptPhoneNumber"
    >
      获取手机号
    </button>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { getUserInfo } from "@/api/user";
import type { UserInfo } from "./index";
import dayjs from "dayjs";
import { onLaunch, onShow, onHide, onLoad } from "@dcloudio/uni-app";
const navToAddress = () => {
  uni.navigateTo({
    url: "/subPackages/address/index",
  });
};
const decryptPhoneNumber = (e: any) => {
  console.log(e);
};
const userInfo = ref<UserInfo>({});
// 获取用户信息
const getUserInfoData = () => {
  const data = {
    _id: uni.getStorageSync("userInfo")._id,
  };
  getUserInfo(data).then((res) => {
    console.log(res);
    userInfo.value = res?.data;
    uni.setStorageSync("userInfo", userInfo.value);
  });
};
const RegistrationTime = computed(() => {
  return dayjs(userInfo.value.date).format("YYYY-MM-DD");
});
// 更新用户信息
const updateUserInfo = () => {
  uni.navigateTo({
    url: "/subPackages/userInfo/updateUserInfo",
  });
};
onShow(() => {
  getUserInfoData();
  uni.setStorageSync("baseUrl", "http://localhost:3000");
});
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  .user-box {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    box-shadow: 0 0 0.45455rem 0 rgba(1, 19, 82, 0.13),
      inset 0.09091rem 0.09091rem 0.09091rem 0 rgb(255, 255, 255),
      inset -0.06061rem -0.06061rem 0.09091rem 0 rgba(123, 123, 123, 0.2);
    margin-bottom: 40rpx;
    .user-img {
      width: 100rpx;
      height: 100rpx;
      margin-right: 30rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>